<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zed - 高性能代码编辑器</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .code-bg {
            background-color: #1e293b;
            color: #f8fafc;
        }
        .mermaid-tooltip {
            position: absolute;
            padding: 8px 16px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <header class="hero-gradient text-white py-20 px-4 md:px-8">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6 font-serif">
                        Zed
                    </h1>
                    <p class="text-xl md:text-2xl opacity-90 mb-8 leading-relaxed">
                        为专业开发者打造的高性能代码编辑器
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="https://zed.dev/" class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium text-lg transition duration-200 flex items-center justify-center gap-2">
                            <i class="fas fa-download"></i> 立即下载
                        </a>
                        <a href="#features" class="border-2 border-white text-white hover:bg-white hover:text-indigo-600 px-6 py-3 rounded-lg font-medium text-lg transition duration-200 flex items-center justify-center gap-2">
                            <i class="fas fa-list-ul"></i> 功能特性
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-4 -left-4 w-32 h-32 rounded-full bg-indigo-400 opacity-20"></div>
                        <div class="absolute -bottom-4 -right-4 w-32 h-32 rounded-full bg-purple-400 opacity-20"></div>
                        <div class="code-bg rounded-xl p-4 shadow-2xl relative z-10">
                            <div class="flex gap-2 mb-4">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <pre class="font-mono text-sm md:text-base overflow-x-auto">
<span class="text-blue-400">import</span> { useState } <span class="text-blue-400">from</span> <span class="text-yellow-300">"react"</span>;

<span class="text-blue-400">function</span> <span class="text-green-400">Counter</span>() {
  <span class="text-blue-400">const</span> [count, setCount] = useState(<span class="text-purple-400">0</span>);

  <span class="text-blue-400">return</span> (
    &lt;div&gt;
      &lt;p&gt;You clicked {count} times&lt;/p&gt;
      &lt;button onClick={<span class="text-blue-400">()</span> =&gt; setCount(count + <span class="text-purple-400">1</span>)}&gt;
        Click me
      &lt;/button&gt;
    &lt;/div&gt;
  );
}</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main>
        <section id="features" class="py-16 px-4 md:px-8">
            <div class="max-w-6xl mx-auto">
                <div class="text-center mb-16">
                    <span class="inline-block px-4 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm font-medium mb-4">核心功能</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">重新定义代码编辑体验</h2>
                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">Zed 将极致的性能与现代化的功能完美结合，为开发者提供前所未有的流畅体验</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300">
                        <div class="text-indigo-600 mb-4">
                            <i class="fas fa-bolt text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">极速性能</h3>
                        <p class="text-gray-600">采用Rust语言开发，提供毫秒级启动速度和流畅的编辑体验，即使在大型项目中也能保持响应性</p>
                    </div>
                    <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300">
                        <div class="text-indigo-600 mb-4">
                            <i class="fas fa-robot text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">智能AI集成</h3>
                        <p class="text-gray-600">内置AI助手功能，支持代码补全、重构建议和自然语言编程，提升开发效率</p>
                    </div>
                    <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300">
                        <div class="text-indigo-600 mb-4">
                            <i class="fas fa-paint-brush text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">现代化界面</h3>
                        <p class="text-gray-600">简洁直观的用户界面，支持主题定制和插件扩展，提供舒适的编程环境</p>
                    </div>
                    <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300">
                        <div class="text-indigo-600 mb-4">
                            <i class="fas fa-users text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">协作功能</h3>
                        <p class="text-gray-600">支持实时协作编辑，团队成员可以同时在同一文件中工作，提高团队开发效率</p>
                    </div>
                    <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300">
                        <div class="text-indigo-600 mb-4">
                            <i class="fas fa-language text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">多语言支持</h3>
                        <p class="text-gray-600">支持多种编程语言和框架，提供语法高亮、代码格式化等基础功能</p>
                    </div>
                    <div class="feature-card bg-white rounded-xl p-8 shadow-lg transition duration-300">
                        <div class="text-indigo-600 mb-4">
                            <i class="fas fa-cogs text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">高度可扩展</h3>
                        <p class="text-gray-600">通过插件系统扩展功能，满足不同开发者的个性化需求</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-16 px-4 md:px-8 bg-gray-50">
            <div class="max-w-6xl mx-auto">
                <div class="text-center mb-16">
                    <span class="inline-block px-4 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm font-medium mb-4">使用场景</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">Zed 的最佳应用场景</h2>
                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">专为高性能编程需求设计的编辑器，在以下场景中表现尤为出色</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="bg-white rounded-xl p-8 shadow-lg">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-3 rounded-lg mr-4">
                                <i class="fas fa-project-diagram text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold">大型项目开发</h3>
                        </div>
                        <p class="text-gray-600">处理包含数万行代码的企业级项目，保持编辑器的快速响应和稳定性。Zed 的内存高效设计和Rust语言的并发特性确保了即使在庞大代码库中也能流畅工作。</p>
                    </div>
                    <div class="bg-white rounded-xl p-8 shadow-lg">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-3 rounded-lg mr-4">
                                <i class="fas fa-user-friends text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold">团队协作编程</h3>
                        </div>
                        <p class="text-gray-600">多个开发者同时编辑同一代码库，实时同步更改和冲突解决。Zed 的协作功能让团队可以像在文档编辑器中一样共同编码，大幅提升团队生产力。</p>
                    </div>
                    <div class="bg-white rounded-xl p-8 shadow-lg">
                        <div class="flex items-center mb-4">
                            <div class="bg-indigo-100 text-indigo-600 p-3 rounded-lg mr-4">
                                <i class="fas fa-lightbulb text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold">快速原型开发</h3>
                        </div>
                        <p class="text-gray-600">利用AI助手快速生成代码片段，加速从概念到实现的转化过程。Zed 的AI功能可以理解上下文并提供智能建议，让开发者能更快将想法转化为实际代码。</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-16 px-4 md:px-8">
            <div class="max-w-6xl mx-auto">
                <div class="text-center mb-16">
                    <span class="inline-block px-4 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm font-medium mb-4">优势对比</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">为什么选择 Zed</h2>
                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">与传统编辑器相比，Zed 带来革命性的性能提升</p>
                </div>

                <div class="bg-white rounded-xl p-8 shadow-lg mb-12">
                    <div class="mermaid text-center" id="comparison-chart">
                        graph TD
                            A[Zed] -->|毫秒级启动| B(极速性能)
                            A -->|Rust语言开发| C(内存安全)
                            A -->|内置AI| D(智能辅助)
                            A -->|实时协作| E(团队开发)
                            F[传统编辑器] -->|较慢启动| G(性能瓶颈)
                            F -->|Electron框架| H(资源占用)
                            F -->|插件依赖| I(功能分散)
                    </div>
                    <div id="mermaid-tooltip" class="mermaid-tooltip"></div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-white rounded-xl p-8 shadow-lg">
                        <h3 class="text-xl font-bold mb-4 font-serif">技术优势</h3>
                        <p class="text-gray-600 mb-6">Zed 最大的优势在于其卓越的性能表现。采用Rust语言开发确保了内存安全和并发性能，即使在处理大型代码库时也能保持流畅体验。同时，其现代化的AI集成功能为开发者提供了智能化的编程辅助。</p>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
                                <span>Rust语言带来的原生性能和内存安全</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
                                <span>轻量级架构，启动速度极快</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
                                <span>AI功能深度集成，无需额外插件</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-white rounded-xl p-8 shadow-lg">
                        <h3 class="text-xl font-bold mb-4 font-serif">使用门槛与成本</h3>
                        <p class="text-gray-600 mb-6">Zed 提供免费版本，支持基础功能使用。高级功能可能需要付费订阅，具体定价信息可在官网查看。</p>
                        <div class="bg-indigo-50 rounded-lg p-4 mb-6">
                            <div class="flex items-center">
                                <i class="fas fa-desktop text-indigo-600 mr-3 text-xl"></i>
                                <div>
                                    <h4 class="font-medium">跨平台支持</h4>
                                    <p class="text-sm text-gray-600">Windows、macOS 和 Linux 平台</p>
                                </div>
                            </div>
                        </div>
                        <a href="https://zed.dev/" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition duration-200 flex items-center gap-2">
                            <i class="fas fa-external-link-alt"></i> 访问官网获取最新定价
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-16 px-4 md:px-8 bg-gray-50">
            <div class="max-w-6xl mx-auto">
                <div class="text-center mb-16">
                    <span class="inline-block px-4 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm font-medium mb-4">上手指南</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-4 font-serif">开始使用 Zed</h2>
                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">只需简单几步，即可体验前所未有的编程体验</p>
                </div>

                <div class="bg-white rounded-xl p-8 shadow-lg max-w-4xl mx-auto">
                    <ol class="space-y-8">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">1</div>
                            <div>
                                <h3 class="text-lg font-bold mb-2">下载安装</h3>
                                <p class="text-gray-600">访问官网下载适合您操作系统的版本，按照指引完成安装</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">2</div>
                            <div>
                                <h3 class="text-lg font-bold mb-2">启动编辑器</h3>
                                <p class="text-gray-600">安装完成后启动Zed编辑器，体验毫秒级启动速度</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">3</div>
                            <div>
                                <h3 class="text-lg font-bold mb-2">打开项目</h3>
                                <p class="text-gray-600">打开现有项目文件夹或创建新项目，开始编写代码</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">4</div>
                            <div>
                                <h3 class="text-lg font-bold mb-2">配置功能</h3>
                                <p class="text-gray-600">根据需求配置AI助手、协作功能和其他个性化设置</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">5</div>
                            <div>
                                <h3 class="text-lg font-bold mb-2">高效编码</h3>
                                <p class="text-gray-600">享受极速的编辑性能和智能辅助功能，提升开发效率</p>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
        </section>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            mermaid.initialize({
                startOnLoad: true,
                theme: 'default',
                flowchart: {
                    useMaxWidth: false,
                    htmlLabels: true,
                    curve: 'basis'
                }
            });

            // 为mermaid图表添加交互效果
            const chart = document.getElementById('comparison-chart');
            const tooltip = document.getElementById('mermaid-tooltip');
            
            chart.addEventListener('mousemove', function(e) {
                const target = e.target;
                if (target.tagName === 'tspan') {
                    const text = target.textContent;
                    if (text) {
                        tooltip.textContent = text;
                        tooltip.style.opacity = '1';
                        tooltip.style.left = (e.pageX + 10) + 'px';
                        tooltip.style.top = (e.pageY + 10) + 'px';
                    }
                }
            });
            
            chart.addEventListener('mouseout', function() {
                tooltip.style.opacity = '0';
            });
        });
    </script>
</body>
</html>